<template>
  <div class="header">
    <span class="headerTitle">muma花店</span>
    <div class="userCenter">
      <span class="portrait" />
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#409eff"
        text-color="#fff"
        active-text-color="#fff"
      >
        <el-submenu index="1">
        <template slot="title">muma花店</template>
          <el-menu-item index="2-1">个人中心</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">退出登录</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
  .userCenter >>> .el-submenu__title i
    color #fff
  .userCenter >>> .el-menu--horizontal>.el-submenu .el-submenu__title
    height 65px
    line-height 65px
    border-bottom-color transparent !important
  .userCenter >>> .el-menu.el-menu--horizontal
    border-bottom none
  .header
    width 100%
    height 65px
    line-height 65px
    background $bgColor
    display flex
    justify-content space-between
    padding 0 40px
    box-sizing border-box
    .headerTitle
      height 100%
      color #fff
      font-size 28px
      display inline-block
    .userCenter
      display flex
      .portrait
        display block
        width 40px 
        height 40px
        border-radius 50%
        border 1px #ccc solid
        margin-top 12px
</style>
